first box

this div element will have a total width of 350px:

Intro example of the box model. Gray box. some extra text to see that the text wraps in a 350px width box

Here is the calculation

350px (width)

+ 20px (Left + Right padding)

+ 10px (left + Right border)

+ 40px (left + Right margin)

= 420px

The total width of an element should be calculated like this

Total element width = width + left padding + right padding + left border + right border +left margin + right margin

the total height of an element should be calculated like this

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

The CSS Box Model

In CSS, the term "box model" is used when talking about design and layout.

Everything on the Internet is basically a bunch of boxes. Whether we see them or not, they're there. So here we discuss and display the 3 types of CSS using a combination of boxes.

Explanation of the different parts

Content
Padding
Border
Margin

The 3 types of CSS

There are 3 types of CSS, so far we've exerienced 2 types. The first was inline when creating the WeAreOne.media footer. The second being internal when it comes to the box model. The third type is external and is an entirely separate file with the extension .css and save in the assets folder for our websites.

Learn more about this project by visiting our About page. We've explored lots of topics. Visit the Explore section to learn more and enroll in an ECS class today!

Hello World!

This is the Box Model

The CSS Box Model

In CSS, the term "box model" is used when talking about design and layout.

Explanation of the different parts

The 3 types of CSS